<template>
<div class="teansctionDet">
  <div class="headerTitle">
    <div class="left fl" @click='jump()'>
      <img src="../../../assets/images/back2x.png">
    </div>
    <div class="stockName">
      <div v-text='"交易明细" + "(" + $route.query.stockName + ")"'></div>
    </div>

    <div class="right fr" @click="teanRefresh()">
      <img src="../../../assets/images/refresh2x.png">
    </div>
  </div>
  <div class="detTitle">
    <div class="picker">
      <popup-picker class="register-date_start-date-wrap" :data="registerDateStart.data" :value='registerDateStart.value' @onScroll='onRegDStartScroll' @change="startDateChange">
        <span class="init-money_value-wrap_value chooseDate" v-text='registerDateStart.value[0] +"年" + registerDateStart.value[1] +"月" +registerDateStart.value[2]+"日"'>
					</span>
        <img src="../../../assets/images/date2x.png" alt="" />
      </popup-picker>
      <i>至</i>
      <popup-picker class="register-date_end-date-wrap" :data="registerDateEnd.data" :value='registerDateEnd.value' @onScroll='onRegDEndScroll' @change="endDateChange">
        <span class="register-date_end-date_value chooseDate" v-text='registerDateEnd.value[0] + "年" + registerDateEnd.value[1] +"月"+registerDateEnd.value[2] + "日"'></span>
        <img src="../../../assets/images/date2x.png" alt="" />
      </popup-picker>
    </div>
    <div class="wrongDate">
      <div class="warningContainer" v-show="isHint" v-text='reminder'></div>
    </div>
    <div class="detTitleLeft">
      <span>总盈亏</span>
      <i v-show='isText'>￥</i>
      <span v-text='queryConf.money' v-show='isText'></span>
      <div class="warningContainer" v-show='!isText'>
        - -
      </div>
    </div>
    <div class="detTitleRight">
      <span>持有天数</span>
      <span v-text='queryConf.holdDays' v-show='isText'></span>
      <i v-show='isText'>天</i>
      <div class="warningContainer" v-show='!isText'>
        - -
      </div>
    </div>
  </div>
  <div class="blank"></div>
  <div class="title">
    <span class="fl">成交时间</span>
    <span class="fl">价格</span>
    <span class="fl">成交方向</span>
    <span class="fl">成交数量</span>
    <span class="fl">拥股数量</span>
    <span class="fl">成交金额</span>
  </div>
  <load-more :bottom-method="loadBottom" ref='loadmore'>
    <ul v-if='isExhibition'>
      <li v-for='item,index in stockData'>
        <div class="time">
          <span v-text='item._source.bizdate'></span>
        </div>
        <div class="price" v-text='item._source.matchprice'></div>
        <div :class='item.textColor' v-text='item.digName'></div>
        <div :class='item.textColor' v-text='dataFormat(item._source.matchqty)'></div>
        <div class="haveNum" v-text='dataFormat(item._source.stkbal)'></div>
        <div class="amount" v-text='dataFormat(item._source.matchamt)'></div>
      </li>
    </ul>
  </load-more>
  <return-empty v-if='isEmpty'></return-empty>
  <return-error v-if='isError'></return-error>
</div>
</template>

<script>
import PopupPicker from '@/components/popup-picker'
import RemoteDAO from '@/common/remoteDAO'
import LoadMore from '@/components/common/LoadMore'

export default {
  data() {
    return {
      queryConf: {
        pagenum: '20',
        pagesize: '1',
        bizdate: '',
        stkcode: '',
        holdDays: '',
        money: ''
      },
      isHint: '',
      reminder: '',
      nowDate: '',
      years: [],
      months: [],
      days: [],
      weeks: ['', '', '', '', '', '', ''],
      stockData: [],
      timeStart: '',
      timeEnd: '',
      isEmpty: '',
      isError: '',
      isExhibition: 'true',
      isText: '',
      registerDateStart: {
        data: [
          [{
            name: '2017年',
            value: '2017'
          }, {
            name: '2018年',
            value: '2018'
          }],
          [{
            name: '1月',
            value: '1'
          }, {
            name: '2月',
            value: '02'
          }],
          [{
            name: '1日 星期六',
            value: '1'
          }, {
            name: '2日 星期日',
            value: '02'
          }]
        ],
        value: ['2018', '02', '02']
      },
      registerDateEnd: {
        data: [
          [{
            name: '2017年',
            value: '2017'
          }, {
            name: '2018年',
            value: '2018'
          }],
          [{
            name: '1月',
            value: '1'
          }, {
            name: '2月',
            value: '02'
          }],
          [{
            name: '1日 星期六',
            value: '1'
          }, {
            name: '2日 星期日',
            value: '02'
          }]
        ],
        value: ['2018', '02', '02']
      }
    }
  },
  components: {
    PopupPicker,
    LoadMore
  },
  mounted() {
    TDAPP.onEvent('002030','');
    TDAPP.send();

    this.init();
  },
  methods: {
    teanRefresh() {
      this.reSearch()

      TDAPP.onEvent('002023', '');
      TDAPP.send();
      TDAPP.onEvent('002030', '');
      TDAPP.send();
      let obj0047 = {
        "tradedate": this.queryConf.bizdate,
        'stock_code': this.queryConf.stkcode,
        'market_code': this.$route.query.marketCode
      }
      RemoteDAO.callZL13100047(obj0047, this.ZL13100047);
    },
    startDateChange(val) {
      this.registerDateStart.value = val;
      let startNum = parseFloat(val.join(''))
      let endNum = parseFloat(this.registerDateEnd.value.join(''))
      let nowTime = parseFloat(this.nowDate)
      if (startNum > endNum && startNum < nowTime) {
        this.isHint = 'true'
        this.reminder = '开始日期不得晚于结束日期哟!'
      } else if (startNum > endNum && startNum > nowTime) {
        this.isHint = 'true'
        this.reminder = '未来时间不可选哦!'
      } else {
        this.isHint = '';
        this.timeStart = '' + this.registerDateStart.value[0] + this.registerDateStart.value[1] + this.registerDateStart.value[2] + '~' +
          this.registerDateEnd.value[0] + this.registerDateEnd.value[1] + this.registerDateEnd.value[2];
        this.queryConf.bizdate = this.timeStart;

        let obj0047 = {
          "tradedate": this.queryConf.bizdate,
          'stock_code': this.queryConf.stkcode,
          'market_code': this.$route.query.marketCode
        }
        RemoteDAO.callZL13100047(obj0047, this.ZL13100047);

        this.reSearch();
      }
    },
    endDateChange(val) {
      this.registerDateEnd.value = val;
      let startNum = parseFloat(this.registerDateStart.value.join(''))
      let endNum = parseFloat(val.join(''))
      let nowTime = parseFloat(this.nowDate)
      if (startNum > endNum && endNum < nowTime) {
        this.isHint = 'true'
        this.reminder = '结束日期不得早于开始日期哟!'
      } else if (endNum > nowTime) {
        this.isHint = 'true'
        this.reminder = '未来时间不可选哦!'
      } else {
        this.isHint = '';
        this.timeEnd = '' + this.registerDateStart.value[0] + this.registerDateStart.value[1] + this.registerDateStart.value[2] + '~' +
          this.registerDateEnd.value[0] + this.registerDateEnd.value[1] + this.registerDateEnd.value[2];
        this.queryConf.bizdate = this.timeEnd;

        let obj0047 = {
          "tradedate": this.queryConf.bizdate,
          'stock_code': this.queryConf.stkcode,
          'market_code': this.$route.query.marketCode
        }
        RemoteDAO.callZL13100047(obj0047, this.ZL13100047);

        this.reSearch();
      }
    },
    reSearch() {
      let vm = this;

      vm.queryConf.pagesize = 1;
      vm.isError = ''
      vm.isEmpty = ''
      vm.isExhibition = 'true'
      if (vm.$refs.loadmore) {
        vm.$refs.loadmore.reset();
      }
      vm.stockData = [];
    },
    loadBottom() {
      let vm = this;

      vm.fetchData(function(allLoaded, error) {
        if (vm.$refs.loadmore) {
          if (error !== null) {
            vm.$refs.loadmore.onBottomError(error); //单次加载失败或者没有数据，error为报错信息，如果是没有数据，写暂无数据
          } else if (allLoaded) {

            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          } else {
            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          }
        }
      });
    },
    fetchData(afterFetchData) {
      let vm = this,
        allLoaded = false,
        error = null;

      RemoteDAO.callZL13100016(vm.queryConf, (result) => {
        if (result.error == '1') {
          this.isError = 'true'
          this.isEmpty = ''
          this.isExhibition = ''
          error = ''
        } else {
          let data = result.data;
          let bigdata = JSON.parse(data).body[0].bigdata;
          let hits = JSON.parse(bigdata).hits.hits;
          if (hits.length == 0) {
            vm.isError = ''
            vm.isEmpty = 'true'
            vm.isExhibition = ''
            error = ''
          } else {
            vm.isError = ''
            vm.isEmpty = ''
            vm.isExhibition = 'true'
            hits.forEach(function(item, index) {
              let digName = hits[index]._source.digestname.substr(2, 2)
              let redColor = 'redColor'
              let greenColor = 'greenColor'
              let blackColor = 'blackColor'
              if (digName == '买入') {
                item.textColor = redColor;
              } else if (digName == '卖出') {
                item.textColor = greenColor;
              } else {
                item.textColor = blackColor;
              }
              item.digName = digName;

            });

            vm.stockData = vm.stockData.concat(hits);
            vm.queryConf.pagesize++;
            if (vm.stockData.length == 0) {
              error = '暂无数据'
            } else if (hits.length < vm.queryConf.pagenum) {
              allLoaded = true
            }
          }
        }

        afterFetchData(allLoaded, error);
      })
    },
    dataFormat(val) { //item._source.matchqty,stkbal,matchamt
      let data = parseFloat(val);

      if (data > 100000 && data < 100000000) {
        return (data / 10000).toFixed(2) + '万'
      } else if (data > 100000000) {
        return (data / 100000000).toFixed(2) + '亿'
      } else if (data < -100000 && data > -100000000) {
        return (data / 10000).toFixed(2) + '万'
      } else if (data < -100000000) {
        return (data / 100000000).toFixed(2) + '亿'
      } else {
        return data;
      }
    },
    jump() {
      this.$router.replace('/pages/Stock')
    },
    init() {
      this.initPicker();
      this.queryConf.stkcode = this.$route.query.stock;
      this.queryConf.bizdate = this.$route.query.time;
      let obj0047 = {
        "tradedate": this.queryConf.bizdate,
        'stock_code': this.queryConf.stkcode,
        'market_code': this.$route.query.marketCode
      }
      RemoteDAO.callZL13100047(obj0047, this.ZL13100047);
    },
    ZL13100047(result) {
      let vm = this;
      vm.isText = true
      if (result.error == '1') {
        vm.isText = false
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).aggregations;
        if (specData.length == 0) {
          vm.isText = false
        } else {
          this.queryConf.money = specData.sum_day_profit.value.toFixed(2)
          if (parseFloat(this.queryConf.money) > 100000 && parseFloat(this.queryConf.money) < 100000000) {
            this.queryConf.money = (parseFloat(this.queryConf.money) / 10000).toFixed(2) + '万'
          }
          if (parseFloat(this.queryConf.money) > 100000000) {
            this.queryConf.money = (parseFloat(this.queryConf.money) / 100000000).toFixed(2) + '亿'
          }
          if (parseFloat(this.queryConf.money) < -100000 && parseFloat(this.queryConf.money) > -100000000) {
            this.queryConf.money = (parseFloat(this.queryConf.money) / 10000).toFixed(2) + '万'
          }
          if (parseFloat(this.queryConf.money) < -100000000) {
            this.queryConf.money = (parseFloat(this.queryConf.money) / 100000000).toFixed(2) + '亿'
          }

          this.queryConf.holdDays = specData.sum_is_hold.value
        }
      }
    },
    initPicker() {
      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth();
      let day = today.getDate();
      let nowDay = today.getDate() < 9 ? '0' + (today.getDate()) : '' + (today.getDate());
      let nowMonth = today.getMonth() < 9 ? '0' + (today.getMonth() + 1) : '' + (today.getMonth() + 1);
      this.nowDate = year + '' + nowMonth + '' + nowDay
      let i;
      let time = this.$route.query.time;
      let timeArr = time.split('~');
      let startYear = timeArr[0].substr(0, 4)
      let startMonth = timeArr[0].substr(4, 2)
      let startDay = timeArr[0].substr(6, 2)
      let endYear = timeArr[1].substr(0, 4)
      let endMonth = timeArr[1].substr(4, 2)
      let endDay = timeArr[1].substr(6, 2)
      for (i = -1; i < 2; i++) {
        let tempY = year + i;
        this.years.push({
          name: tempY + '年',
          value: tempY + ''
        });
      };
      for (i = 0; i < 12; i++) {
        this.months.push({
          name: i + 1 + '月',
          value: i < 9 ? '0' + (i + 1) : i + 1 + ''
        });
      };
      let dayIndex = today.getDate() - 1;
      this.registerDateStart.data = [this.years, this.months, this.getDays(year, month)];
      this.registerDateEnd.data = [this.years, this.months, this.getDays(year, month)];
      this.registerDateStart.value = [
        startYear,
        startMonth,
        startDay
      ];
      this.registerDateEnd.value = [
        endYear,
        endMonth,
        endDay
      ];
    },
    getDays: function(year, month) {
      year = parseInt(year);
      month = parseInt(month);
      let isRN = 0;
      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) isRN = 1;
      let monthsDay = [31, 28 + isRN, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      let days = [],
        tempToday = new Date(year, month);
      for (let i = 0; i < monthsDay[month]; i++) {
        tempToday.setDate(i + 1);
        days.push({
          name: i + 1 + ' ' + this.weeks[tempToday.getDay()],
          value: (i + 1) < 10 ? '0' + (i + 1) : i + 1 + ''
        });
      }
      return days;
    },
    onRegDStartScroll: function(val) {
      this.registerDateStart.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
    },
    onRegDEndScroll: function(val) {
      this.registerDateEnd.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
    }
  }
}
</script>

<style scoped>
.teansctionDet {
  font-size: 0.12rem;
  margin-bottom: 0;
}

.detTitle {
  width: 100%;
  height: 1.6rem;
  font-size: 0.14rem;
  background: url('../../../assets/images/Gradient2x.png') no-repeat;
  text-align: center;
  color: #fff;
}

.hint {
  display: block;
  color: red;
  margin-top: 0.1rem
}

.picker i {
  margin: 0 0.15rem;
}

.detTitle .chooseDate {
  text-align: left;
  display: inline-block;
  width: 1.25rem;
  height: 0.25rem;
  line-height: 0.25rem;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-top: 0.2rem;
  padding-left: 0.05rem;
  font-size: 0.14rem;
}

.detTitle img {
  display: inline-block;
  width: 0.07rem;
  height: 0.07rem;
  margin-left: -0.15rem;
  vertical-align: middle;
}

.detTitleLeft,
.detTitleRight {
  width: 45%;
  display: inline-block;
  margin-top: 0.07rem;
}

.detTitleLeft span:first-child,
.detTitleRight span:first-child {
  display: block;
  margin-bottom: 0.05rem;
}

.detTitleLeft span:nth-child(3),
.detTitleRight span:nth-child(2) {
  font-size: 0.24rem;
}

.blank {
  height: 0.2rem;
  background-color: #f0f0f0;
  box-shadow: inherit 0 -1px 0 0 #ddd, inherit 0 -1px 0 0 #ddd;
}

.info {
  display: inline-block;
  width: 100%;
  padding-left: 0.1rem;
  height: 0.3rem;
  line-height: 0.3rem;
  border-bottom: 1px solid #ddd;
}

.info i:first-child {
  color: #ddd;
}

.info i:nth-child(n+2) {
  color: green;
}

.info b {
  color: #E31A2E;
}

.title {
  height: 0.35rem;
  font-size: 0.14rem;
  color: #555;
  border-bottom: 1px solid #ddd;
  text-align: center;
  padding-left: 2%;
  background-color: white;
}

.title span {
  display: inline-block;
  width: 16%;
  line-height: 0.35rem;
}

.title span:nth-child(n+2) {
  text-align: center;
}

ul li {
  height: 0.4rem;
  text-align: center;
  font-size: 0.15rem;
  padding-left: 2%;
  display: block;
  background-color: white;
  border-bottom: 1px solid #ddd;
  color: #222;
}

ul li>div {
  width: 16%;
  height: 100%;
  float: left;
}

ul li>div:nth-child(n+2) {
  line-height: 0.4rem;
}

.time {
  font-size: 0.14rem;
  text-align: center;
}

.time span {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 0.4rem;
}

.redColor {
  color: #e31a2e;
}

.greenColor {
  color: #1ea241;
}

.blackColor {
  color: black;
}











/*picker*/

.register-date_start-date-wrap {
  color: white;
  border-radius: 3px;
  display: inline-block;
  min-width: 109px;
}

.register-date_start-date-wrap i {
  color: white;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(95, 170, 232, 1);
  float: right;
  padding: 0 8px;
}

.register-date_end-date-wrap {
  color: white;
  border-radius: 3px;
  display: inline-block;
  min-width: 109px;
}

.register-date_end-date-wrap i {
  color: white;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(95, 170, 232, 1);
  float: right;
  padding: 0 8px;
}

.headerTitle {
  width: 100%;
  height: 0.44rem;
  background: #212138;
  color: #fff;
  margin-top: 0;
  text-align: center;
}

.left {
  margin-top: 0.13rem;
}

.left img {
  height: 0.18rem;
  margin-left: 0.15rem;
}

.stockName {
  font-size: 0.18rem;
  line-height: 0.44rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.wrongDate {
  margin-top: 0.1rem;
  height: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrongDate .warningContainer {
  height: 100%;
  padding: 0 0.05rem;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.12rem;
  color: #fff;
  border-radius: 0.02rem;
}

.right {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.13rem;
}

.right img {
  height: 0.18rem;
  margin-right: 0.15rem;
}
</style>
